// import { useEffect, useState,useCallback } from 'react';

// function App() {
//   const [count, setCount] = useState(0);
//   // const foo = function() {
//   //   console.log(count);
//   // }
//   //  使用useCallback时,函数中使用到的变量也需要添加到依赖的数组中
//   const foo = useCallback(()=> {
//     console.log(count);
//   },[count])
//   useEffect(() => {
//     foo();
//   }, [foo]);//warning  The 'foo' function makes the dependencies of useEffect Hook (at line 11) change on every render. Move it inside the useEffect callback.
// // 解决办法： 使用useCallback

//   const handleClick = () => {
//     setCount(count + 1);
//   };

//   return (
//     <div>
//       hello App
//       <button onClick={handleClick}>点击</button>
//       {count}
//     </div>
//   );
// }

// export default App;

import { useEffect, useState } from 'react';

function App() {
  const [count, setCount] = useState(0);


  useEffect(() => {
    const foo = function() {
    console.log(count);
  }
  foo();
  }, [count]);


  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      hello App
      <button onClick={handleClick}>点击</button>
      {count}
    </div>
  );
}

export default App;
